.WebPage {
    .list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        justify-items: center;
        min-height: 100px;
        margin-top: 40px;

        .item {
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 200px;
            height: 250px;
            padding: 0px 20px;
            border: 1px solid #eee;
            border-radius: 5px;
            background-color: #fff;
            transition: box-shadow 0.3s;

            &:hover {
                box-shadow: 0px 2px 15px -3px rgba(121, 122, 243, 0.1);
            }

            &:hover .name {
                color: #727cf5;
            }

            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 80px;
                background-color: #727cf5;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                border-bottom-left-radius: 50%;
                border-bottom-right-radius: 50%;
            }

            .avatar {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 90px;
                height: 90px;
                margin-top: 30px;
                border-radius: 50%;
                background-color: #fff;
                z-index: 2;

                img {
                    width: 93%;
                    height: 93%;
                    border-radius: 50%;
                    transition: transform 0.3s;

                    &:hover {
                        transform: scale(1.1);
                    }
                }
            }

            .name {
                margin: 10px 0;
                font-weight: 900;
                transition: color 0.3s;
                cursor: pointer;
            }

            .description {
                font-size: 13px;
                color: #666;
                line-height: 20px;

                display: -webkit-box !important;
                overflow: hidden;
                word-break: break-all;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .type {
                position: absolute;
                bottom: 12px;
                padding: 2px 15px;
                margin: 10px 0;
                border-radius: 10px;
                color: #fff;
                background-color: #727cf5;
                transition: bottom 0.3s;
            }

            &:hover .type {
                bottom: -40px;
            }

            .operate {
                position: absolute;
                bottom: -40px;
                display: flex;
                background-color: #fff;
                transition: bottom 0.3s;

                width: 100%;
                justify-content: center;
                padding: 10px 0;

                div {
                    padding: 3px 10px;
                    margin: 0 5px;
                    color: #fff;
                    font-size: 14px;
                    border-radius: 5px;
                    cursor: pointer;

                    &:nth-child(1) {
                        background-color: #49b984;
                    }

                    &:nth-child(2) {
                        background-color: #f16c6d;
                    }
                }
            }

            &:hover .operate {
                bottom: 35px;
            }

            .headFor {
                position: absolute;
                bottom: -30px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 30px;
                color: #fff;
                background-color: #727cf5;
                transition: bottom 0.3s;

                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                cursor: pointer;
            }

            &:hover .headFor {
                bottom: 0;
            }
        }
    }
}
